<template>
  <div class="recommenduser" v-if="recommendUsers.length > 0">
    <van-divider v-if="showTip">{{ $t("lang.你可能感兴趣") }}</van-divider>
    <div class="recommenduser_list">
      <ul
        :style="'width:' + (recommendUsers.length * 140 + 140) / 23.44 + 'rem'"
      >
        <li
          v-for="(item, index) in recommendUsers"
          :key="'recommenduser_' + index"
        >
          <div class="recommenduser_list_item">
            <RecommendUserItem
              :item="item"
              :isBigHead="isBigHead"
            ></RecommendUserItem>
          </div>
        </li>
        <li>
          <router-link
            :to="{
              name: 'MORERECOMMENDUSER',
              params: { usid: this.$store.state.user.userId },
            }"
            class="recommenduser_list_more"
            :title="this.$t('lang.更多推荐用户')"
            ><i class="icon-more"></i
          ></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "RecommendUser",
  props: {
    items: {
      type: Object,
      default() {
        return {};
      },
    },
    showTip: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  components: {
    RecommendUserItem: () =>
      import(
        /* webpackChunkName:"recommendUserItem" */ "../../components/common/recommendUserItem.vue"
      ),
  },
  data() {
    return {
      isBigHead: true,
    };
  },
  created() {
    this.recommendUsers = [
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
    ];
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.recommenduser {
  min-height: 200 / @base;
  overflow: scroll;
  overflow-y: hidden;
  .recommenduser_list {
    padding: 0 10 / @base 10 / @base;
    overflow: scroll;
    overflow-y: hidden;
    ul {
      li {
        float: left;
        .recommenduser_list_item {
        }
        .recommenduser_list_more {
          line-height: 140 / @base;
          text-align: center;
          display: block;
          width: 60 / @base;
          padding: 20 / @base 10 / @base;
          font-size: 24 / @base;
        }
      }
    }
  }
}
</style>
